<template>
  <div class="snacks-container">
    <el-card class="snacks-card">
      <template #header>
        <div class="card-header">
          <span>布布的零食记录</span>
          <el-button type="primary" @click="addSnack">添加零食</el-button>
        </div>
      </template>

      <div class="snacks-content">
        <el-row :gutter="20">
          <el-col :span="16">
            <div class="snacks-list">
              <el-empty v-if="!snacksList.length" description="还没有记录零食呢~" />
              <el-card 
                v-for="snack in snacksList" 
                :key="snack.id" 
                class="snack-item"
                shadow="hover"
              >
                <div class="snack-content">
                  <div class="snack-info">
                    <h4>{{ snack.name }}</h4>
                    <p class="time">{{ snack.time }}</p>
                    <div class="tags">
                      <el-tag size="small" :type="snack.category.type">
                        {{ snack.category.name }}
                      </el-tag>
                      <el-tag size="small" type="warning" v-if="snack.isSweet">
                        含糖
                      </el-tag>
                    </div>
                    <p class="notes">{{ snack.notes }}</p>
                  </div>
                  <div class="snack-actions">
                    <el-button-group>
                      <el-button size="small" type="primary" @click="editSnack(snack)">
                        编辑
                      </el-button>
                      <el-button size="small" type="danger" @click="deleteSnack(snack)">
                        删除
                      </el-button>
                    </el-button-group>
                  </div>
                </div>
              </el-card>
            </div>
          </el-col>
          
          <el-col :span="8">
            <el-card class="statistics-card">
              <template #header>
                <div class="card-header">
                  <span>零食统计</span>
                </div>
              </template>
              <div class="statistics-content">
                <div class="stat-item">
                  <span class="label">今日零食次数</span>
                  <span class="value">3次</span>
                </div>
                <div class="stat-item">
                  <span class="label">本周零食支出</span>
                  <span class="value">¥68</span>
                </div>
                <div class="stat-item">
                  <span class="label">最爱零食类型</span>
                  <span class="value">饼干</span>
                </div>
                <el-divider>营养建议</el-divider>
                <div class="advice">
                  <p>💡 今天的糖分摄入已经足够啦，建议吃点水果代替零食哦~</p>
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const snacksList = ref([
  {
    id: 1,
    name: '巧克力饼干',
    time: '10:30',
    category: { name: '饼干', type: 'warning' },
    isSweet: true,
    notes: '布布最爱的下午茶点心'
  },
  {
    id: 2,
    name: '果冻',
    time: '15:00',
    category: { name: '糖果', type: 'danger' },
    isSweet: true,
    notes: '水果味的果冻，很开心'
  },
  {
    id: 3,
    name: '薯片',
    time: '16:30',
    category: { name: '零食', type: 'info' },
    isSweet: false,
    notes: '看动画片时吃的零食'
  }
])

const addSnack = () => {
  // 添加零食记录的逻辑
}

const editSnack = (snack) => {
  // 编辑零食记录的逻辑
}

const deleteSnack = (snack) => {
  // 删除零食记录的逻辑
}
</script>

<style scoped>
.snacks-container {
  padding: 20px;
}

.snacks-card {
  margin-bottom: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.snacks-content {
  margin-top: 20px;
}

.snacks-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.snack-item {
  transition: all 0.3s;
}

.snack-content {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.snack-info {
  flex: 1;
}

.snack-info h4 {
  margin: 0 0 8px 0;
  color: #2c3e50;
}

.time {
  color: #999;
  font-size: 13px;
  margin: 5px 0;
}

.tags {
  margin: 8px 0;
  display: flex;
  gap: 8px;
}

.notes {
  color: #666;
  font-size: 14px;
  margin: 8px 0 0 0;
}

.statistics-card {
  position: sticky;
  top: 20px;
}

.statistics-content {
  padding: 10px 0;
}

.stat-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.stat-item .label {
  color: #666;
}

.stat-item .value {
  font-weight: bold;
  color: #409EFF;
}

.advice {
  padding: 10px;
  background: #f8f9fa;
  border-radius: 8px;
}

.advice p {
  margin: 0;
  color: #666;
  font-size: 14px;
  line-height: 1.5;
}
</style> 